<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XPath-CSS Finder</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/pop.css">
</head>

<body class="bg-gray-100">
    <div class="main-container">
        <div class="bg-white rounded-lg shadow-md p-4">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <img src="images/icon48.png" class="icon" />
                    <h1 class="text-xl font-bold text-gray-800">XPath-CSS Finder</h1>
                </div>
                <div class="relative inline-block w-12 mr-2 align-middle select-none">
                    <input type="checkbox" id="toggleSwitch"
                        class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform duration-200 ease-in" />
                    <label for="toggleSwitch"
                        class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                </div>
            </div>

            <div id="statusMessage" class="mb-4 text-sm font-medium text-gray-600">
                Toggle the switch to start selecting elements
            </div>

            <div id="xpathInputContainer" class="mb-4">
                <div class="relative">
                    <input type="text" id="xpathInput" placeholder="Enter expression" class="beautiful-input w-full px-4 py-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm hover:border-indigo-300 transition-colors" />
                    <button id="resetButton" class="beautiful-reset">Reset</button>
                </div>
                <div id="xpathMatchCount" class="mt-2 hidden">
                    <div class="flex items-center px-3 py-2 bg-indigo-600 text-white rounded-md">
                        <svg class="h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm font-medium">Found <span id="matchCount" class="font-bold">0</span> matching elements</span>
                    </div>
                </div>
            </div>

            <div id="xpathContainer" class="hidden">
                <div class="flex items-center justify-between mb-2">
                    <h2 id="selectorHeader" class="text-md font-semibold text-gray-700">Generated XPaths:</h2>
                    <div class="flex items-center space-x-8">
                        <div class="flex items-center mr-2">
                            <span class="text-xs text-gray-600 mr-2">Basic Mode</span>
                            <label class="simple-toggle">
                                <input type="checkbox" id="simpleMode" checked>
                                <span class="simple-slider"></span>
                            </label>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs text-gray-600 mr-2">CSS Mode</span>
                            <label class="simple-toggle">
                                <input type="checkbox" id="cssMode">
                                <span class="simple-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div id="xpathList" class="space-y-2"></div>
            </div>
        </div>
    </div>

    <script src="popup.js"></script>
</body>

</html>
